import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';
import ModifyPassword from '@/component/setting/ModifyPassword';
import SettingLayout from '@/component/setting/Layout';
import SettingStyle from '@/page/setting/setting.scss';
import { Link } from 'react-router';
import AuthenticationCode from '@/component/setting/AuthenticationCode';
import ModifyPswSuccess from './ModifyPswSuccess';
import adminType from '@/tool/adminType';
import adminAuthType from '@/tool/adminAuthType';
import UserStore from '@/store/User';
import AlStore from '@/store/Alliance';
import format from '@/tool/format';

@observer class SettingSecurity extends Component {
    static propTypes = {
        history: PropTypes.object
    };
    defaultState = {
        spinning: false,
        codePassed: false,
        modifySuccess: false
    };
    state = this.defaultState;
    componentDidMount() {
        this._isMounted = true;
        if (adminType() != 1 || adminAuthType() != 1) this.props.history.push('/设置/修改密码');
    }
    componentWillUnmount() {
        this._isMounted = false;
    }
    //fix异步
    _setState = state => {
        if (this._isMounted) this.setState(state);
    };
    isCodePass = () => {
        this._setState({ codePassed: true });
    };
    modifySuccess = () => {
        this._setState({ modifySuccess: true });
    };
    onReset = () => {
        this._setState(this.defaultState);
    };
    render() {
        const { codePassed, modifySuccess } = this.state;
        if (modifySuccess) return <ModifyPswSuccess onReset={this.onReset} />;
        return (
            <SettingLayout>
                <div className={SettingStyle['security-wrap']}>
                    <table border="0" className={SettingStyle['login-info']}>
                        <thead />
                        <tbody>
                            <tr>
                                <td className={SettingStyle['login-account']}>登录账号:</td>
                                <td className={SettingStyle['login-account']}>{UserStore.info.account_name}  {AlStore.info.verify == 1 && <span>(<span style={{ color: "#FFC758" }}>您已经通过实名认证</span>)</span>}</td>
                            </tr>
                            <tr>
                                <td className={SettingStyle['login-account']}>注册时间:</td>
                                <td className={SettingStyle['login-account']}>{format.timeString(UserStore.info.reg_time)}</td>
                            </tr>
                        </tbody>
                    </table>
                    <div className={SettingStyle['step']} />
                    <div className={SettingStyle['item']}>手机验证码验证  账户<span>{UserStore.info.account_name}</span>为确保是您本人操作，请完成以下验证</div>
                    <hr className={SettingStyle['security-line']} />
                    {(!codePassed && !modifySuccess) && <AuthenticationCode confirmCodePass = {this.isCodePass} />}
                    {(codePassed && !modifySuccess) && <ModifyPassword onSuccess = {this.modifySuccess}/> }
                </div>
            </SettingLayout>
        );
    }
}

export default SettingSecurity;